import { useState, useEffect, useCallback } from "react";
import { View, ScrollView } from "@tarojs/components";
import { Empty } from "@nutui/nutui-react-taro";
import { colChartStat, statListClass } from "@/axios/math";
import { IHeaderBox, Itable, IBarCharts, IloadMore } from "@/components/index";

import "./index.scss";

interface MLPIndexProps {}

const typeMap: API.OptionItem[] = [
  { label: "人数", value: 1 },
  { label: "平均分", value: 2 },
];

const abilityMap: API.OptionItem[] = [
  { label: "高", value: 0 },
  { label: "低", value: 1 },
];
const columns = [
  {
    title: "学生姓名",
    align: "center",
    key: "userName",
  },
  {
    title: "空间想象能力",
    align: "center",
    key: "imagineScore",
  },
  {
    title: "抽象概括能力",
    align: "center",
    key: "abstractScore",
  },
  {
    title: "推理论证能力",
    align: "center",
    key: "reasonScore",
  },
  {
    title: "运算求解能力",
    align: "center",
    key: "calScore",
  },
  {
    title: "资料处理能力",
    align: "center",
    key: "calScore",
  },
];

interface FormDataProps {
  pageNum: number;
  pageSize: number;
  tab: number;
}

const MLPIndex: React.FC<MLPIndexProps> = () => {
  const [type, setType] = useState<number>(1);
  const [triggered, setTriggered] = useState<boolean>(false);
  const [chartData, setChartData] = useState<API.ChartStatItem[]>([]);
  const [listData, setListData] = useState<API.StatListClassItem[]>([]);
  const [formData, setFormData] = useState<FormDataProps>({
    pageNum: 1,
    pageSize: 10,
    tab: 0,
  });
  const [loadStatus, setLoadStatus] = useState<API.LoadStatusProps>("more");
  const [otherInfo, setOtherInfo] = useState<
    Pick<API.TableResProps<null>, "pages">
  >({
    pages: 1,
  });

  const handleChangeType = (value: number) => {
    setType(value);
  };
  const handleChangeAbilityVal = (value: number) => {
    setFormData({
      pageNum: 1,
      pageSize: 10,
      tab: value,
    });
  };

  const getChartData = useCallback(async () => {
    try {
      const results = await colChartStat({ tab: type });
      setChartData(results);
    } catch {}
  }, [type]);

  const getTableData = useCallback(async () => {
    try {
      if (formData.pageNum > 1) setLoadStatus("loading");
      const { list = [], ...other } = await statListClass({ ...formData });
      if (formData.pageNum == 1) {
        setListData(list);
      } else {
        setListData((preState) => [...preState, ...list]);
      }
      setLoadStatus(other.pages > formData.pageNum ? "more" : "noMore");
      setOtherInfo(other);
      setTriggered(false);
    } catch {}
  }, [formData]);

  useEffect(() => {
    getChartData();
  }, [getChartData]);

  useEffect(() => {
    getTableData();
  }, [getTableData]);

  const onRefresh = () => {
    getChartData();
    setTriggered(true);
    setFormData({
      pageNum: 1,
      pageSize: 10,
      tab: 0,
    });
  };

  const handlerBottom = () => {
    if (otherInfo.pages == formData.pageNum) {
      setLoadStatus("noMore");
    } else {
      setFormData({
        ...formData,
        pageNum: formData.pageNum + 1,
      });
      setLoadStatus("loading");
    }
  };

  return (
    <ScrollView
      scrollY
      className="scrollview"
      onRefresherRefresh={onRefresh}
      enableBackToTop
      refresherEnabled
      refresherTriggered={triggered}
      scrollWithAnimation
      onScrollToLower={handlerBottom}
    >
      <View className="common_page">
        <View className="card_box chart_box">
          <IHeaderBox
            title="数学能力"
            options={typeMap}
            current={type}
            handleClick={handleChangeType}
          />
          <IBarCharts id="mlp_chart" data={chartData} fontSize={9} />
        </View>
        <View className="card_box data_box">
          <IHeaderBox
            title="能力优选"
            options={abilityMap}
            current={formData.tab}
            handleClick={handleChangeAbilityVal}
          />
          <View className="data_info">
            {listData.length > 0 ? (
              <>
                <Itable columns={columns} data={listData} />
                <IloadMore loadStatus={loadStatus} />
              </>
            ) : (
              <Empty imageSize={120} />
            )}
          </View>
        </View>
      </View>
    </ScrollView>
  );
};

export default MLPIndex;
